<template>
	<view class="box" v-if="is_loading>0">
		<view class="loader_zmy">
			<view class="logo">
				<image src="/static/logo.png" mode="widthFix"></image>
			</view>
			<view class="loading">
				<image src="/static/loading.png" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "zkLoading",
		data() {
			return {};
		},
		computed: {
			is_loading() {
				return this.$store.state.loading
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999999;
		display: flex;
		justify-content: center;
		align-items: center;
		// background: rgba(0, 0, 0, .2);
		font-size: 50rpx;
	}

	.loader_zmy {
		width: 120rpx;
		height: 120rpx;
		border-radius: 100rpx;
		overflow: hidden;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;

		.logo {
			width: 100%;
			height: 100%;
			opacity: 70%;
			box-shadow: 0 0 10rpx 0 #fff;
		}

		.loading {
			position: absolute;
			z-index: 99;
			width: 132rpx;
			height: 132rpx;
			top: -6rpx;
			left: -6rpx;
			animation: loading_rotate 1s linear infinite;
		}
	}

	@keyframes loading_rotate {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}
</style>